<template>
  <div>
    <div class="tp2">
      <p>水电用量</p>
    </div>
    <div class="shuidian">
      <div class="dian">
        <img src="../assets/images2/dian.png" alt="" />
        <span>总用电量{{ zdian }}</span>
      </div>
      <div class="shui">
        <img src="../assets//images2/shui.png" alt="" />
        <span>总用水量{{ zshui }}</span>
      </div>
    </div>
    <div class="da2" ref="wrap"></div>
  </div>
</template>

<script setup >
// 导入echarts库
import * as echarts from 'echarts'
// 导入vue的onMounted和ref函数
import { onMounted, ref } from 'vue'
// 导入getwater函数
import { getwater } from '../request'
let zshui = ref(0) // 定义一个变量zshui，用于存储用水量
let wrap = ref('') // 定义一个变量wrap，用于存储DOM元素
let zdian = ref(0) // 定义一个变量zdian，用于存储用电量

let option = ref({
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: '8px'
    }
  },
  tooltip: {},
  dataset: {
    dimensions: ['product', '安防设备用电', '教学用水', '生态用水', '生活用水'],
    source: [
      { product: '七月', 安防设备用电: 43.3, 教学用水: 85.8, 生态用水: 93.7, 生活用水: 80 },
      { product: '八月', 安防设备用电: 83.1, 教学用水: 73.4, 生态用水: 55.1, 生活用水: 80 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
})
onMounted(() => {
  getwater().then((res) => {
    // console.log(res)
    // console.log(res.data.data)
    // 将返回的数据中的result中的series中的name提取出来
    let names = res.data.data.result[0].series.map((item, index) => {
      return item.name
    })
    // 从res.data.data.result[0]中获取yAxis.data，并遍历
    let source = res.data.data.result[0].yAxis.data.map((item, index) => {
      // 创建一个空对象
      let obj = {}
      // 遍历names数组
      names.forEach((v, i) => {
        // 将res.data.data.result[0].series[i].data[index]赋值给obj[v]
        obj[v] = res.data.data.result[0].series[i].data[index]
      })
      return {
        // 返回一个对象，包含product属性和obj对象的所有属性
        product: item,
        ...obj
      }
    })
    // console.log(source)
    option.value.dataset.source = source
    myChart.setOption(option.value)

    // 总用电量和用水量
    source.forEach((item) => {
      for (let key in item) {
        if (key === '安防设备用电') {
          zdian.value += item[key]
          console.log(zdian)
        } else {
          if (key != 'product') {
            zshui.value += item[key]
            console.log(zshui)
          }
        }
      }
    })
  })
  // 确保 wrap.value 是一个 DOM 元素
  if (wrap.value) {
    var myChart = echarts.init(wrap.value)
    myChart.setOption(option.value)
  }
})
</script>

<style>
.tp2 {
  width: 22%;
  height: 38px;
  /* height: 10px; */
  background: url('../assets//images2/titlebg.png');
  transform: rotateY(180deg);
  background-size: 100% 100%;
  position: absolute;
  right: 60px;
  top: 70px;
  line-height: 45px;
}
.tp2 p {
  transform: rotateY(180deg);
  color: #fff;
  padding-left: 30px;
}
.shuidian {
  width: 22%;
  height: 50px;
  position: absolute;
  top: 120px;
  right: 60px;
  background-color: #0c1d5f;
  /* background-color: pink; */
  color: #fff;
  line-height: 50px;
}
.shuidian img {
  margin-top: 10px;
}
.shui {
  width: 155px;
  height: 100%;
  /* background-color: red; */
  float: left;
  margin-right: 5px;
}
.dian {
  width: 155px;
  height: 100%;
  /* background-color: rgb(181, 150, 150); */
  float: left;
}
.da2 {
  width: 460px;
  height: 270px;
  background-color: #0c1d5f;
  margin-top: 180px;
  margin-left: 81px;
}
</style>